<template>
  <div class="layout-all">
    <div style="clear:both;"></div>
    <el-tree :highlight-current=true :data="tableData" :props="defaultProps" :default-expand-all="tableData.length > 5" class="tree-width">
       <div class="custom-tree-node flex_row_between" slot-scope="{ node, data }">
        <div class="tree_left flex_row_between">
          <div class="tree_item flex_row_between" >
            <el-tooltip class="item" effect="dark" :content="'ID:'+data.id" placement="top-start">
              <div>
                
                <input class="input_item" type="text" placeholder="标题" v-model="form.title" v-if="data.$treeNodeId == treeNodeId" @click.stop="">
                <div v-else @click.stop="">{{title_list[data.id] ? title_list[data.id] : data.title}}</div>
              </div>
            </el-tooltip>
          </div>
          <div class="tree_item flex_row_between" >
            <!-- <div class='item_discription'>图标：</div> -->
            <el-tooltip class="item" effect="dark" content="一级分类：750 x 300, 二三级分类100 x 100" placement="top-start">
              <div @click.stop="">
              <upload-pic v-if="data.pid==0" :thumb="data.thumb" @update:thumb="upload($event,data)" width="150" height="60"/>
              <upload-pic v-else :thumb="data.thumb" @update:thumb="upload($event,data)" width="50" height="50"/>
              </div>
            </el-tooltip>
            <i class="el-icon-delete" style="margin-left:10px;font-size:24px;" v-if="data.$treeNodeId == treeNodeId" @click.stop="deleteImg()"></i>
          </div>
          <div class="tree_item flex_row_between" >
            <el-tooltip class="item" effect="dark" content="排序" placement="top-start">
              <div>
                <input class="input_item" type="number" placeholder="排序" v-model="form.sort" v-if="data.$treeNodeId == treeNodeId" @click.stop="">
                <el-tag type="info" v-else @click.stop="">{{sort_list[data.id] ? sort_list[data.id] : data.sort}}</el-tag>
              </div>
            </el-tooltip>
          </div>
          <template v-if="model!='shop'&&data.pid==0">
            <div class="tree_item flex_row_between" >
              <el-tooltip class="item" effect="dark" content="计算业绩时的百分比" placement="top-start">
                <div>
                  <input class="input_item" type="number" placeholder="计算业绩%" v-model="form.achievement" v-if="data.$treeNodeId == treeNodeId" @click.stop="">
                  <el-tag type="warning" v-else @click.stop="">{{achievement_list[data.id] ? achievement_list[data.id] : data.achievement}}</el-tag>
                </div>
              </el-tooltip>
            </div>
             <div class="tree_item flex_row_between" >
              <el-tooltip class="item" effect="dark" content="单独设置级差奖" placement="top-start">
                <el-tag type="primary">{{data.is_level_diff==1?'级差奖':'无'}}</el-tag>
              </el-tooltip>
            </div>
             <div class="tree_item flex_row_between" >
              <el-tooltip class="item" effect="dark" content="单独设置同级奖" placement="top-start">
                <el-tag type="success">{{data.is_level_identical==1?'同级奖':'无'}}</el-tag>
              </el-tooltip>
            </div>
          </template>
          

          <div class="tree_item">
            <el-button type="primary" size="mini" v-if="data.status == 1" @click.stop="changeStatus(data.id,'status' ,data.status)">启用</el-button>
            <el-button type="danger" size="mini" v-else @click.stop="changeStatus(data.id,'status' ,data.status)">禁用</el-button>
          </div>
        </div>
        <div>
          <el-button type="success" icon="el-icon-check" circle @click.stop="onSubmit()"  v-if="data.$treeNodeId == treeNodeId"></el-button>
          <el-button type="primary" icon="el-icon-edit" circle @click.stop="editItem(node,data)"></el-button>
          <router-link :to="(model=='shop'?'./scat_form/':'./cat_form/') + data.id">
            <el-button type="warning" icon="el-icon-right" circle></el-button>
          </router-link>
          <el-button type="danger" icon="el-icon-delete" circle @click.stop="deleteItem(node,data)"></el-button>
        </div>
      </div>

    </el-tree>
  </div>

</template>

<script>
export default {
  name:'publicClassify',
  props:['controller','model',],
  data() {
    return {
      treeNodeId:'',
      defaultProps: {
        children: 'child',
        label: 'title'
      },
      request_url:'',
      tableData: [],
      form :{
        title:'',
        thumb:'',
        id:'',
        sort:'',
        achievement:0,
      },
      title_list:{},
      sort_list:{},
      achievement_list:{},
    }
  },
  activated(){
    if(this.$getUpdate()){
      this.onSearch()
    }
  },
  created() {
    this.request_url='/'+this.model+'/'+this.controller+'/'
    this.onSearch()
  },
  methods: {
    // 封面上传完成
    upload(res,data) {
      data.thumb=res
        this.get(this.request_url+'saveImg', {thumb:res,id:data.id}, 'POST').then(e => {
          console.log(e)
        })
    },
    editItem (node,data) {
      if (this.treeNodeId == data.$treeNodeId) {
        this.treeNodeId = ''
      } else {
        this.treeNodeId = data.$treeNodeId
        this.form.title = this.title_list[data.id] ? this.title_list[data.id] : data.title
        this.form.thumb = data.thumb
        this.form.sort = this.sort_list[data.id] ? this.sort_list[data.id] : data.sort
        this.form.achievement = this.achievement_list[data.id] ? this.achievement_list[data.id] : data.achievement
        this.form.id = data.id
      }

    },
    treeClick (a,b,c) {
        cosnole.log(a)
        cosnole.log(b)
        cosnole.log(c)
    },
    // 查询
    handleSizeChange(val) {
      this.onSearch()
    },
    handleCurrentChange(val) {
      this.current_page = val
      this.onSearch()
    },
    changeStatus(id, field, val) {
      this.update(id, val, field, this.controller,this.model).then(e => {
        e ? this.onSearch() : ''
      })
    },
     onSubmit() {
      const form = this.form
      console.log(form)
      if (form.title === '') {
        this.$message({
            type: 'error',
            message: '请输入分类标题'
          })
          return
      }
      if (form.sort === '') {
        this.$message({
            type: 'error',
            message: '请填写排序信息!'
          })
          return
      }
      this.get(this.request_url+'save', form, 'POST').then(e => {
        this.vue.set(this.title_list, form.id, form.title)
        this.vue.set(this.sort_list, form.id, form.sort)
        this.vue.set(this.achievement_list, form.id, form.achievement)
        this.treeNodeId = ''
      })
    },
    onSearch() {
      this.get(this.request_url+'index', this.form, 'POST').then(e => {
        this.tableData = e.list
      })
    },
    // 添加
    onAdd() {},
    // 编辑
    onEdit(id) {
      console.log(id)
    },
    deleteImg () {
       this.$confirm('是否删除该分类图片', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
         this.form.thumb =''
        this.onSubmit()
      })
     
    },
    // 删除
    deleteItem(node,data) {
      console.log(data)
      this.$confirm('是否删除该记录', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.get(this.request_url+'del?id=' + data.id, {}, 'POST').then(e => {
          this.onSearch()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style lang="scss">
.el-tree{
  .el-tree-node__content {
    height:100px ;
  }
  .tree_item {
  font-size:14px;
  width:30%;
  justify-content: flex-start;
}
}
</style>


<style>
.flex_row_between {
  display: flex;
  align-items: center;
  justify-content: space-between;

}
.avatar_classify {
  width:50px;
  height:50px;
}
.avatar_classify .el-upload {
  width:50px;
  height:50px;
}
.avatar_classify .el-upload--picture-card {
  height:50px;
  width:50px;
  line-height: 50px;
  text-align: center;
}
.avatar_classify .el-upload--picture-card i {
  font-size:12px;
}
.tree_left {
  width:100%;
  justify-content: flex-start;
}
.layout-all {
  margin-top: 20px;
  margin-left: 10px;
}
.layout-content {
  margin-top: 20px;
}
.el-tree-node__label {
  font-size:16px !important;
}

.custom-tree-node {
  padding-right:200px;
  width:100%;
}
/* .tree_item {
  font-size:14px;
  width:15%;
  justify-content: flex-start;
} */
.item_discription {
  color:#000;
  font-size:12px;
  margin-right:10px;
}
.input_item {
  width:120px;
}
.tree-width {
  width:80%;
}

@media (max-width:550px) {
  .tree-width{
    width: 100% !important;
  }
  .tree_item{
    width: 200px !important;
  }

}

</style>>
